<script setup lang="ts">
// 接收父组件的数据
const props = defineProps<{
  tableHeadData: any
  tableBodyData: any
}>()
</script>
<template>
  <table class="financia-table">
    <thead>
      <tr>
        <th v-for="column in props.tableHeadData" :key="column">
          {{ column }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in props.tableBodyData" :key="index">
        <td :class="{ white: row.region }">
          {{ row.region }}
        </td>
        <td :class="{ white: row.country }">{{ row.country }}</td>
        <td :class="{ red: row.amount }">{{ row.amount }}{{ row.units }}</td>
        <td :class="{ blue: row.amountRatio }">{{ row.amountRatio }}%</td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss" scoped>
.financia-table {
  width: 100%;
  height: 260px;

  table-layout: fixed;
  thead {
    width: 100%;
    height: 40px; /* 将表头高度设置为40px */
    line-height: 40px; /* 将表头行高设置为40px */
    color: #ffffff;
    font-size: 14px;
font-weight: 700;
    th {
      text-align: center;
      width: 100px;
      border-bottom: 2px solid #010826;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  tbody {

    .white {
      color: #ffffff;
    }
    .red {
      color: #f18337;
    }
    .blue {
      color: #019ae1;
    }
    td {
      text-align: center;
      width: 100px;
      vertical-align: middle;
      border-bottom: 2px solid #010826;
      width: 50px; /* 设置单元格宽度为100px */
      white-space: nowrap; /* 不允许文本换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分省略为省略号 */
      font-size: 10px;
    }

    tr:last-child td {
      border-bottom: none;
    }
  }
}
</style>
